<script setup lang="tsx">
import { ref } from 'vue'
import { ElMenu, ElMenuItem, ElSubMenu, ElIcon, ElHeader, ElDropdown, ElDropdownMenu, ElDropdownItem, ElAvatar } from 'element-plus'
import { Menu, Home, DataBoard, Settings, Statistics, ShoppingCart, Warehouse, Bell, TrendingUp } from '@element-plus/icons-vue'

const isCollapse = ref(false)

// 生成菜单项路由索引
const getMenuItemIndex = (parentIndex, childIndex) => {
  // 直接使用parentIndex和childIndex生成路由路径
  return `/${parentIndex}/${childIndex}`
}

// ERP系统常用菜单
const menuItems = [
  {
    index: 'home',
    label: '首页',
    icon: 'Home'
  },
  {
    index: 'basic',
    label: '基础数据',
    icon: 'DataBoard',
    children: [
      { index: 'supplier', label: '供应商管理' },
      { index: 'material-category', label: '物料分类' },
      { index: 'material-info', label: '物料信息' },
      { index: 'workshop', label: '生产车间' },
      { index: 'customer', label: '客户管理' }
    ]
  },
  {
    index: 'system',
    label: '系统管理',
    icon: 'Settings',
    children: [
      { index: 'department', label: '部门管理' },
      { index: 'user', label: '用户管理' },
      { index: 'role', label: '角色管理' }
    ]
  },
    {
    index: 'research',
    label: '研发管理',
    icon: 'Settings',
    children: [
      { index: 'ebom', label: '产品BOM' },
    ]
  },
  { index: 'purchase',
        label: '采购管理',
        icon: 'ShoppingCart',
        children: [
            { index: 'order', label: '采购订单' },
            { index: 'receipt', label: '采购到货单' }
          ]
        },
  { index: 'warehouse',
        label: '仓库管理',
        icon: 'Warehouse',
        children: [
            { index: 'inventory', label: '库存管理' },
            { index: 'list', label: '仓库列表' },
            { index: 'stock-in', label: '采购入库' }
          ]
        },
  { index: 'sales',
        label: '销售管理',
        icon: 'TrendingUp',
        children: [
            { index: 'contract', label: '销售合同' },
            { index: 'order', label: '销售订单' }
          ]
        }
  ]
</script>

<template>
  <el-container style="min-height: 100vh;">
    <el-header class="header">
      <div class="header-left">
        <ElIcon :size="24" :icon="Menu" class="menu-toggle" @click="isCollapse = !isCollapse" />
        <div class="header-title">ERP管理系统</div>
      </div>
      <div class="header-right">
        <ElIcon :size="20" :icon="Bell" class="header-icon" />
        <ElDropdown placement="bottom-end">
          <div class="user-info">
            <ElAvatar :size="32" class="user-avatar">Admin</ElAvatar>
            <span class="user-name">管理员</span>
          </div>
          <template #dropdown>
            <ElDropdownMenu>
              <ElDropdownItem>个人中心</ElDropdownItem>
              <ElDropdownItem>系统设置</ElDropdownItem>
              <ElDropdownItem divided>退出登录</ElDropdownItem>
            </ElDropdownMenu>
          </template>
        </ElDropdown>
      </div>
    </el-header>
    <el-container style="height: calc(100vh - 60px);">
      <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar" :class="{ collapsed: isCollapse }">
        <ElMenu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          :collapse="isCollapse"
          router
        >
          <template v-for="item in menuItems" :key="item.index">
            <ElSubMenu v-if="item.children" :index="item.index">
              <template #title>
                <ElIcon :size="18" :icon="item.icon" />
                <span>{{ item.label }}</span>
              </template>
              <ElMenuItem v-for="child in item.children" :key="child.index" :index="getMenuItemIndex(item.index, child.index)">
                <span style="padding-left: 20px;">{{ child.label }}</span>
              </ElMenuItem>
            </ElSubMenu>
          </template>
        </ElMenu>
      </el-aside>
      <el-main style="padding: 0px;">
        <slot></slot>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
/* 确保body和html也设置为100%宽度 */
html, body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

/* 路由视图容器样式 */
.router-view-container {
  width: 100% !important;
  height: 100% !important;
}

.sidebar {
  height: calc(100vh - 60px);
  color: white;
  transition: width 0.3s;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid #e4e7ed;
}




.logo-text {
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.collapse-btn {
  color: white;
  background-color: transparent;
  border: none;
}


/* 顶部导航栏样式 */
.header {
  height: 60px;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left {
  display: flex;
  align-items: center;
}

.menu-toggle {
  margin-right: 16px;
  cursor: pointer;
  color: #001529;
}

.header-title {
  font-size: 18px;
  font-weight: bold;
  color: #001529;
}

.header-right {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 24px;
  color: #001529;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-avatar {
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  color: #001529;
}


</style>